<script setup>
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
import {selectMenuById,createMenu,updateMenuById} from "@/api/basal.js";
import { useRouter } from 'vue-router';
import {ResultEnums} from "@/enums/ResultStatusEnums.js";
import Help from "@/components/debris/Help.vue";
const {proxy} = getCurrentInstance();
const router = useRouter();
const formRef = ref(null)
const errorMessage = ref(null)
const menu = reactive({menuName:'',menuAlias:'',createSystemCode: proxy.$route.query.systemCode,isEnable:true,
  parentId:proxy.$route.query.parentId,id:proxy.$route.query.id,menuDescribed:'',menuUrl:'',sort:0,menuIcon:'',
  menuGroupSignboard: proxy.$route.query.signboard});
onMounted(() => {
  onLoad( proxy.$route.query.systemCode,proxy.$route.query.id)
})

async function onLoad(systemCode,id){
  if(id && systemCode){
    let result = await selectMenuById(systemCode,id);
    if(result.code === ResultEnums.SUCCESS ){
      const data = result.data
      for(const key in data){
        menu[key] = data[key]
      }
    }
  }
}

function confirm(e){
  e.preventDefault();
  if (formRef.value.checkValidity()) {
    if(menu.id){ invokeUpdate(menu.createSystemCode,menu.id,menu)} else { invokeInsert(menu) }
  } else {
    formRef.value.reportValidity();
  }
}

async function invokeInsert(obj){
  const result = await createMenu(obj)
  if(result.code === ResultEnums.SUCCESS ){
    router.go(-1);
  }else {
    errorMessage.value = result.message;
  }
}

async function invokeUpdate(systemCode,id,obj){
  const result = await updateMenuById(systemCode,id,obj)
  if(result.code === ResultEnums.SUCCESS ){
    router.go(-1);
  }else {
    errorMessage.value = result.message;
  }
}

</script>

<template>
  <h1 class="app-page-title" v-if="proxy.$route.meta">
    <a href="#" @click="(e)=>{e.preventDefault();router.go(-1);}"> <i class="bi bi-reply-all"></i></a> {{ proxy.$route.meta.theme }}
  </h1>
  <hr class="mb-4">
  <div class="row g-4 settings-section">
    <div class="app-card app-card-settings shadow-sm p-4">

      <div class="app-card-body">
        <form class="settings-form" ref="formRef">
          <div class="mb-3">
            <label for="setting-input-1" class="form-label">菜单名称</label>
            <input type="text" class="form-control" id="setting-input-1" v-model="menu.menuName" required maxlength="50">
          </div>
          <div class="mb-3">
            <label for="setting-input-2" class="form-label">菜单别名</label>
            <input type="text" class="form-control" id="setting-input-2" v-model="menu.menuAlias" maxlength="100" required>
          </div>
          <div class="mb-3">
            <label for="setting-input-3" class="form-label">
              图标  <a href="https://icons.getbootstrap.com/"><i class="bi bi-info-circle"></i></a>
            </label>
            <input type="text" class="form-control" id="setting-input-3" v-model="menu.menuIcon" maxlength="100">
          </div>
          <div class="mb-3">
            <label for="setting-input-4" class="form-label">菜单URL</label>
            <input type="text" class="form-control" id="setting-input-4" v-model="menu.menuUrl" maxlength="500" required>
          </div>
          <div class="mb-3">
            <label for="setting-input-5" class="form-label">标识牌</label>
            <input type="text" class="form-control" id="setting-input-5" v-model="menu.menuGroupSignboard" maxlength="100" required>
          </div>
          <div class="mb-3">
            <label for="setting-input-6" class="form-label">描述信息</label>
            <textarea  class="form-control" id="setting-input-6" v-model="menu.menuDescribed" maxlength="500"></textarea>
          </div>
          <div class="mb-3">
            <label for="setting-input-7" class="form-label">菜单排序</label>
            <input type="number" class="form-control" id="setting-input-7" v-model="menu.sort" required>
          </div>
          <div class="form-check form-switch mb-3">
            <input class="form-check-input" type="checkbox" id="settings-switch-8" v-model="menu.isEnable">
            <label class="form-check-label" for="settings-switch-8">启用</label>
          </div>
          <Transition v-if="errorMessage">
            <div class="alert alert-warning alert-dismissible fade" :class="errorMessage&&' show '" role="alert">
              <strong>错误提示!</strong> {{ errorMessage }}
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
          </Transition>
          <button type="submit" class="btn app-btn-primary" @click="confirm">确认</button>
        </form>
      </div><!--//app-card-body-->
    </div><!--//app-card-->
  </div><!--//row-->
</template>

<style scoped>

</style>